import React, { Component, useReducer } from "react";
/* 1.定义reducer函数，根据不同的action 返回不同的状态 */
function reducer(state, { type }) {
  switch (type) {
    case "incr":
      return state + 1;
    case "decr":
      return state - 1;
    default:
      return state;
  }
}
export default function UseRedu() {
  /* 2.组件中调用useReducer（reducer,0）=>[state,dispatch] */
  let [state, dispatch] = useReducer(reducer, 0);
  return (
    <>
      <h3>useReducer的使用</h3>
      <h4>state:{state}</h4>
      {/* 3.调用dispatch({type:'incr})=>通知reducer产生一个新的状态 */}
      <button onClick={() => dispatch({ type: "incr" })}>新增</button>
      <button onClick={() => dispatch({ type: "decr" })}>state--</button>
    </>
  );
}
